<template>
  <div class="myModel materialSelect">
    <el-dialog title="选择品项" :visible.sync="showDialog"  :close-on-click-modal="false"   :before-close="handleClose" style="padding: 0;">
      <div style="margin-left: 10px;margin-right: 10px">
        <br>
          <el-row :gutter="20" >
            <el-col :span="8">
              <el-input v-model="input" @keyup.enter.native="keyDown($event)" placeholder="编号/条码/名称" size="medium"></el-input>
            </el-col>
            <el-col :span="12" style="text-align: left;">
              <el-button  class="btn-info" size="medium"  icon="el-icon-search" @click="search">搜索</el-button>
              <el-button  class="btn-warning"  size="medium" style="margin-left: 1px"  icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
            </el-col>
          </el-row>

        <el-row style="margin: 0; margin-top: 20px;">
          <el-col :span="4" style="padding-left: 0">
            <div class="me_title">类别</div>
            <el-tree :data="treeData" :props="defaultProps"  @node-click="handleNodeClick" style="height:400px;overflow-y:auto"
                     :expand-on-click-node="true" :default-expand-all="true" :highlight-current="true"></el-tree>
          </el-col>
          <el-col :span="20" style="height:440px;overflow-y:auto; padding-left: 25px;">
              <el-table
                v-loading="loading"
                :data="tableData"
                @selection-change="selectionChange"
                :border="true"
                style="width:100%;">
                <el-table-column
                  type="selection"
                >
                </el-table-column>
                <el-table-column property="no" label="编号" width="85">
                </el-table-column>
                <el-table-column property="goodcode" label="条码" width="150">
                  <template  slot-scope="scope">
                    <el-tooltip class="item" effect="light"  placement="bottom-start" v-if="scope.row.goodcodes && scope.row.goodcodes.length>1">
                      <div slot="content">所选品项含有多个条码:<br/>
                        <div v-for="(item,index) in scope.row.goodcodes">
                          <span>{{index+1}}、{{item}}</span>
                        </div>
                      </div>
                      <el-button  type="text" style="padding-top: 0; padding-bottom: 0">{{scope.row.goodcode}}</el-button>
                    </el-tooltip>
                    <span v-else>{{scope.row.goodcode}}</span>
                  </template>
                </el-table-column>
                <el-table-column property="name" label="名称"></el-table-column>
                <el-table-column property="goodsSpec" label="规格" width="80"></el-table-column>
                <el-table-column property="purchaseUnit" label="采购单位" width="80"></el-table-column>
                <el-table-column property="unit" label="库存单位" width="80"></el-table-column>
                <el-table-column property="purchaseSpec" label="采购规格" width="80"></el-table-column>
              </el-table>
          </el-col>
        </el-row>
        <br />
         <div class="block">
                <el-row>
                  <el-col :span="24" class="text-right">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="pageSizes"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
                    </el-pagination>
                  </el-col>
                </el-row>
              </div>


      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click=" closeDialog" size="medium">取 消</el-button>
        <el-button type="primary" @click="commitData"  size="medium">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  //注意路径
  export default{
    props:['isShow','storeId'],
    data(){
      return {
        treeData:[],
        tableData: [],
        loading:false,
        pageSize:window.pageSize,
        pageSizes:window.pageSizes,
        currentPage:1,
        input:"",
        inputValue:"",
        total:0,
        addShow:false,
        activityId:"",
        selectChildId:'',//选择商品类别 子节点id,
        selectType:false,
        selectTableData:[],
        selfClient:null,
        smallTypeId :"",
        bigTypeId :"",
        showDialog:false,
        defaultProps:{
          label: function(data, node){
            return "["+data.no+"]"+data.name
          }
        },
      }
    },
    watch: {
      isShow:function(newValue,oldValue){
        this.showDialog=newValue;
        if(newValue){
          this.initData();
          this.selectTableData=[];
        }
      }
    },
    created(){
      window.this = this;
      this.initData();
    },
    methods: {
      initData() {
        this.loading = true;
        this.currentPage = 1;
        this.getData();
      },
      keyDown(ev) {
        if (ev.keyCode == 13) {
          this.currentPage = 1;
          this.inputValue = this.input;
          this.getData();
        }
      },
      cleanSearch() {
        this.currentPage = 1;
        this.input = "";
        this.inputValue = this.input;
        this.getData();
      },
      search() {
        this.currentPage = 1;
        this.inputValue = this.input;
        this.getData();
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
        this.getData();
      },
      handleClose() {
        this.$emit("closeDialog");
        this.showDialog = false;

      },
      newLabel(newList) {
        if (newList) {
          for (var i = 0; i < newList.length; i++) {
            newList[i].label = newList[i].name;
            if (newList[i].children) {
              this.newLabel(newList[i].children)
            }
          }
        }
      },
      getData() {
        console.log(">>>>>>>>>>>>>>> : "+this.storeId);
        if(this.storeId){
          this.$axios.get("materials/materials/getMaterials?page.pn=" + this.currentPage + "&page.size=" + this.pageSize + "&search.code_eq=" + this.inputValue+"&storeId="+this.storeId).then((data) => {
            this.loading = false
            if (data.status == 200) {
              this.tableData = data.content.materialList.content;
              console.log(this.tableData);
              if(this.tableData && this.tableData.length>0){
                for(var i=0;i<this.tableData.length;i++){

                  if(this.tableData[i].codes && this.tableData[i].codes!=''){
                    this.tableData[i].goodcode = this.tableData[i].codes.substring(1,14);
                    this.tableData[i].codes = this.tableData[i].codes.substring(1,this.tableData[i].codes.length-2); //截取前后的逗号
                    if(this.tableData[i].codes!=''){
                      this.tableData[i].goodcodes = this.tableData[i].codes.split(",");//分隔成数组
                    }
                  }
                  this.tableData[i].goodcodestrs = this.tableData[i].codes;
                }
              }



              this.total = data.content.materialList.totalElements;
              let tree = data.content.treeData;
              this.newLabel(tree);
              this.treeData = tree;

            } else {
              this.loading = false
            }
          })
          this.loading = false
        }


      },
      handleNodeClick(data) {
        console.log(data);
        var id = data.id;
        var cate = "";
        if (id != 0) {
          cate = id;
        } else {
          cate = "";
        }
        this.loading = true;
        this.$axios.get("materials/materials/getMaterials?search.category.id_eq=" + cate + "&page.pn=1&page.size=" + this.pageSize+"&storeId="+this.storeId).then((data) => {
          if (data.status == 200) {
            this.loading = false
            this.tableData = data.content.materialList.content;
            for (var i = 0; i < this.tableData.length; i++) {
              if (this.tableData[i].category.name != null) {
                this.tableData[i].category = this.tableData[i].category.name
              }
            }
            this.total = data.content.materials.totalElements;
            this.loading = false
          } else {
            this.loading = false
          }
        }).catch(function (err) {
        })

      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getData();
      },
      selectionChange(selection) {
        console.log(selection);
        this.selectTableData = [];
        for(var i=0;i<selection.length;i++){
          this.selectTableData.push(selection[i]);
        }

      },
      closeDialog(){
        this.$emit("closeDialog");
        this.showDialog = false;
      },
      commitData() {
        if(this.selectTableData.length<=0 ){
          this.$message({
            type: 'warning',
            message: '请先选择一种原料!'
          });
          return;
        }
        console.log(this.selectTableData.length);
        this.$emit("pushData", this.selectTableData);
        this.showDialog = false;
      },

    }
  }
</script>
<style scoped>

  .me_title{
    padding: 10px;
    background-color: #eef1f6;
    border: 1px solid #dfe6ec;
    border-bottom: 0;
    text-align: left;
  }

</style>
